<template>
  <div class="step_box">
    <div
      class="step_item"
      :class="activeIndex(index)"
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="step_line"></div>
      <div class="title_box">
        <span
          class="el-icon-success title_icon"
          v-if="activeIndex(index) == 'finish'"
        >
        </span>
        <div class="title_num" v-else style="width: 18px; height: 18px">
          {{ index + 1 }}
        </div>
        <span class="title"> {{ item.title }} </span>
      </div>
      <div class="description">{{ item.description }}</div>
    </div>
  </div>
</template>

<script>
let that = null;
export default {
  computed: {
    activeIndex() {
      return function (index) {
        if (index == this.active) {
          return "process";
        }
        if (this.active > index) {
          return "finish";
        }
        return "step_item";
      };
    },
  },
  created() {
    that = this;
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    active: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style lang='scss' scoped>
.step_box {
  display: flex;
  .process {
    background: #e9f2fb;
    .step_line {
      background-color: #9bc5eb;
    }
    .description {
      color: #2680d2;
    }
    .title_box {
      .title_num {
        border: 0;
        color: #fff;
        background-color: #2680d2;
      }

      .title {
        color: #2680d2;
        font-size: 16px;
      }

      .title_icon {
        color: #2680d2;
      }
    }
  }
  .finish {
    background: #f6fcf3;
    .step_line {
      background-color: #b8e8a0;
    }
    .title_box {
      .title {
        color: #52c41a;
        font-size: 16px;
      }

      .title_icon {
        color: #52c41a;
      }
    }
  }
}
.step_item {
  margin-right: 2px;
  width: 188px;
  height: 80px;
  background: rgba(245, 245, 245, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
  position: relative;
  &:last-child {
    margin-right: 0;
  }
  .step_line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #cccccc;
  }
  .description {
    color: #707070;
    font-size: 14px;
    margin-top: 10px;
  }
  .title_box {
    display: flex;
    align-items: center;
    .title_num {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid #707070;
      color: #707070;
      font-size: 13px;
      margin-right: 6px;
    }
    .title {
      color: #333333;
      font-size: 16px;
    }
    .title_icon {
      color: #707070;
      font-size: 22px;
    }
  }
}
</style>